<template>
  <div>
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      label-width="68px"
      @submit.native.prevent
    >
      <el-form-item label="招商单位" prop="companyName">
        <el-input
          v-model="queryParams.companyName"
          placeholder="请输入招商单位"
          clearable
          :style="{ width: isPhoneType ? '' : '160px' }"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams.projectName"
          placeholder="请输入项目名称"
          clearable
          :style="{ width: isPhoneType ? '' : '160px' }"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="参展年限" prop="joinYear">
        <el-select
          :style="{ width: isPhoneType ? '' : '160px' }"
          v-model="queryParams.joinYear"
          placeholder="请选择参展年限"
          @change="selectYear"
        >
          <el-option
            v-for="item in dict.type.sys_exhibit_year"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select
          :style="{ width: isPhoneType ? '' : '160px' }"
          v-model="queryParams.status"
          placeholder="审核状态"
          clearable
          @change="selectStatus"
        >
          <el-option
            v-for="dict in dict.type.sys_apply_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >
          搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="list">
      <el-table-column
        label="操作"
        align="center"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-view"
            @click="handleView(scope.row)"
          />
          <el-button
            v-if="scope.row.status != 1 && scope.row.status != 3"
            type="text"
            icon="el-icon-edit-outline"
            @click="handleUpdate(scope.row)"
          />
          <el-button
            v-if="scope.row.status != 1 && scope.row.status != 3"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="展区名称"
        align="center"
        prop="deptName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="招商单位"
        align="center"
        prop="companyName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="联系人"
        align="center"
        prop="userName"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.userName || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="联系方式"
        align="center"
        prop="userMobile"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.userMobile || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="项目名称"
        align="center"
        prop="projectName"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          {{ scope.row.projectName || "-" }}
        </template>
      </el-table-column>
      <el-table-column
        label="总投资额(元)"
        align="center"
        prop="allMoney"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="拟融资额(元)"
        align="center"
        prop="prepared"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="合作方式"
        align="center"
        prop="meth"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="项目负责人"
        align="center"
        prop="dutyName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="报名时间"
        align="center"
        prop="createTime"
        width="165"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="审核状态"
        align="center"
        prop="status"
        :show-overflow-tooltip="true"
        width="90"
      >
        <template slot="header" slot-scope="scope">
          审核状态
          <el-tooltip
            content="审核通过后，如发现信息填报错误请联系上级单位对信息进行删除，重新上传信息。重新上传的信息需要二次审核"
            placement="top"
          >
            <i class="el-icon-question cp"></i>
          </el-tooltip>
        </template>
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0" class="gray">待审核</span>
          <span v-if="scope.row.status === 1" class="green">市级通过</span>
          <span v-if="scope.row.status === 2" class="red">市级驳回</span>
          <span v-if="scope.row.status === 3" class="green">省级通过</span>
          <span v-if="scope.row.status === 4" class="red">省级驳回</span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核意见"
        align="center"
        prop="auditInfo"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0"> -</span>
          <span v-if="scope.row.status === 1 || scope.row.status === 2">
            {{ scope.row.cityAuditInfo || "-" }}
          </span>
          <span v-if="scope.row.status === 3 || scope.row.status === 4">
            {{ scope.row.auditInfo || "-" }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        label="审核人员"
        align="center"
        prop="auditBy"
        width="90"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 0"> -</span>
          <span v-if="scope.row.status === 1 || scope.row.status === 2">
            {{ scope.row.cityAudit || "-" }}
          </span>
          <span v-if="scope.row.status === 3 || scope.row.status === 4">
            {{ scope.row.auditBy || "-" }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      :width="isPhoneType ? '100%' : '800px'"
      append-to-body
      class="auto-dialog"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="94px"
        style="margin-top: -30px"
        :label-position="isPhoneType ? 'top' : 'right'"
        :class="isPhoneType ? 'wx_phone_form' : ''"
      >
        <el-divider content-position="left">
          <div class="m-title">填报信息：</div>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="展区名称：" prop="deptId">
              <treeselect
                v-model="form.deptId"
                :options="deptOptions"
                :show-count="true"
                placeholder="请选择展区名称"
                :flat="true"
                style="height: 36px"
                :normalizer="myNormalizer"
              />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="招商单位：" prop="companyName">
              <el-input
                v-model="form.companyName"
                placeholder="请输入招商单位"
              />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="联系人：" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="联系方式：" prop="userMobile">
              <el-input
                v-model="form.userMobile"
                placeholder="请输入联系方式"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <div class="dashed"></div>

        <el-divider content-position="left">
          <div class="m-title">项目信息：</div>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="24">
            <el-form-item label="项目名称：" prop="projectName">
              <el-input
                v-model="form.projectName"
                placeholder="请输入项目名称"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目简介：" prop="info">
              <el-input
                type="textarea"
                v-model="form.info"
                placeholder="请输入项目简介"
                :rows="4"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="进展情况：" prop="evolve">
              <el-input
                v-model="form.evolve"
                placeholder="请输入项目进展情况"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目进展  图片资料：" prop="urlList">
              <ul
                v-if="form.urlList && form.urlList.length != 0"
                class="more-100-list"
              >
                <li v-for="(item, index) in form.urlList" :key="index">
                  <div v-if="item" class="demo-image__preview">
                    <el-image
                      :src="item"
                      :preview-src-list="[item]"
                      class="avatar"
                    />
                  </div>

                  <i
                    class="el-icon-delete remove-img"
                    @click="handleRemove(index)"
                  />
                </li>
              </ul>
              <ul class="w100 fl">
                <div>
                  <uploadBig
                    :showBtn="true"
                    btnText="上传项目进展图片资料"
                    upWidth="152px"
                    upHeight="30px"
                    upLineHeight="30px"
                    :accept="imgAccept"
                    :showFileList="false"
                    :fileSize="5"
                    @getUpload="uploadImg"
                  />
                </div>
                <div class="w100 small-text">
                  提示：建议上传格式为
                  <span class="red">{{ imgAccept }}</span>
                  的文件
                </div>
              </ul>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="" prop="pdfList">
              <template slot="label">
                <template v-if="isPhoneType">
                  <span>项目进展附件资料：</span>
                </template>
                <template v-else>
                  <span>项目进展</span> <br />
                  <span>附件资料：</span>
                </template>
              </template>
              <transition-group
                v-if="form.pdfList && form.pdfList.length != 0"
                class="upload-file-list el-upload-list el-upload-list--text"
                name="el-fade-in-linear"
                tag="ul"
              >
                <li
                  v-for="(item, index) in form.pdfList"
                  :key="index"
                  class="el-upload-list__item ele-upload-list__item-content mb20"
                >
                  <el-link :href="item" :underline="false" target="_blank">
                    <span
                      class="el-icon-document"
                      style="overflow-wrap: anywhere"
                    >
                      {{ item }}
                    </span>
                  </el-link>
                  <el-link
                    :underline="false"
                    type="danger"
                    class="fr mb10"
                    @click.stop="handleRemoveMore(index)"
                  >
                    删除
                  </el-link>
                </li>
              </transition-group>
              <ul class="w100 fl">
                <div>
                  <uploadBig
                    :showBtn="true"
                    btnText="上传项目进展附件资料"
                    upWidth="152px"
                    upHeight="30px"
                    upLineHeight="30px"
                    :accept="fileAccept"
                    :showFileList="false"
                    :fileSize="100000000"
                    @getUpload="uploadMoreImg"
                  />
                </div>
                <div class="w100 small-text">
                  提示：建议上传格式为
                  <span class="red">{{ fileAccept }}</span>
                  的文件
                </div>
              </ul>
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="预期收益：" prop="predict">
              <el-input-number
                v-model="form.predict"
                placeholder="请输入项目预期收益（元）"
                controls-position="right"
                :min="0"
                class="tl mr10"
                style="width: calc(100% - 25px)"
              />
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="总投资额：" prop="allMoney">
              <el-input-number
                v-model="form.allMoney"
                placeholder="请输入总投资额（元）"
                controls-position="right"
                :min="0"
                class="tl mr10"
                style="width: calc(100% - 25px)"
              />
              <span>元</span>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="mb20 ml20 mr20">
          <ul>
            <li>注意：</li>
            <li>
              1.本表所有填报项均为必填项（包括序号），填报内容无或无法确定的填写“无”或“待定”，不得有空项，未填写无法上传。
            </li>
            <li>2.填报信息必须真实有效，否则无法通过审核。</li>
          </ul>
        </div>

        <div class="dashed"></div>

        <el-divider content-position="left">
          <div class="m-title">其他信息：</div>
        </el-divider>
        <el-row :gutter="10">
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="拟融资额：" prop="prepared">
              <el-input-number
                v-model="form.prepared"
                placeholder="请输入拟融资额（元）"
                controls-position="right"
                :min="0"
                class="tl mr10"
                style="width: calc(100% - 25px)"
              />
              <span>元</span>
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="合作方式：" prop="meth">
              <el-input v-model="form.meth" placeholder="请输入合作方式" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="资金用途：" prop="way">
              <el-input v-model="form.way" placeholder="请输入资金用途" />
            </el-form-item>
          </el-col>
          <el-col :span="isPhoneType ? 24 : 12">
            <el-form-item label="参展年限：" prop="joinYear">
              <el-select
                v-model="form.joinYear"
                placeholder="请选择参展年限"
                class="w100"
              >
                <el-option
                  v-for="item in dict.type.sys_exhibit_year"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人：" prop="dutyName">
              <el-input
                v-model="form.dutyName"
                placeholder="请输入项目负责人"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式：" prop="dutyMobile">
              <el-input
                v-model="form.dutyMobile"
                placeholder="请输入项目负责人联系方式"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="地址：" prop="address">
              <el-input v-model="form.address" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" :loading="btnLoading">
          确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog
      title="查看填报信息"
      :visible.sync="detailOpen"
      :width="isPhoneType ? '100%' : '800px'"
      append-to-body
      class="auto-dialog"
    >
      <detailDialog
        ref="detailInfo"
        :detailForm="detailForm"
        :isPhoneType="isPhoneType"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailOpen = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  attractList,
  attractInfo,
  editAttract,
  removeAttract,
} from "@/api/project/attract";
import detailDialog from "@/components/Project/dialog/detail/attract";

import { deptTreeSelect } from "@/api/system/user";

import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { checkMobile } from "@/utils/index";

export default {
  name: "User",
  dicts: ["sys_apply_status", "sys_exhibit_year"],
  components: { Treeselect, detailDialog },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        companyName: undefined,
        projectName: undefined,
        joinYear: "2025",
        status: undefined,
        sig: 1,
      },
      // 总条数
      total: 0,
      list: [],

      open: false,
      title: "",
      form: {},
      // 表单校验
      rules: {
        deptId: [
          { required: true, message: "请选择展区名称", trigger: "blur" },
        ],
        companyName: [
          { required: true, message: "请输入招商单位", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        userMobile: [
          { required: true, message: "请输入联系方式", trigger: "blur" },
        ],
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        info: [{ required: true, message: "请输入项目简介", trigger: "blur" }],
        evolve: [
          {
            required: true,
            message: "请输入项目进展情况",
            trigger: "blur",
          },
        ],
        predict: [
          { required: true, message: "请输入项目预期收益", trigger: "blur" },
        ],
        allMoney: [
          { required: true, message: "请输入总投资额", trigger: "blur" },
        ],
        prepared: [
          { required: true, message: "请输入拟融资额", trigger: "blur" },
        ],
        meth: [{ required: true, message: "请输入合作方式", trigger: "blur" }],
        way: [{ required: true, message: "请输入资金用途", trigger: "blur" }],
        dutyName: [
          { required: true, message: "请输入项目负责人", trigger: "blur" },
        ],
        dutyMobile: [
          {
            required: true,
            message: "请输入项目负责人联系方式",
            trigger: "blur",
          },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入地址",
            trigger: "blur",
          },
        ],
        joinYear: [
          { required: true, message: "请选择参展年限", trigger: "change" },
        ],
        urlList: [
          {
            required: true,
            message: "请上传项目进展图片资料",
            trigger: "change",
          },
        ],
      },

      detailForm: {},
      detailOpen: false,

      btnLoading: false,
      deptOptions: [],
      imgAccept: ".png, .jpg, .jpeg",
      fileAccept: ".pdf",

      isPhoneType: false,
    };
  },

  created() {
    this.isPhoneType = checkMobile();

    this.getList();
    this.getDeptTree();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      attractList(this.queryParams)
        .then((response) => {
          this.list = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },

    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect({ flag: this.queryParams.sig }).then((response) => {
        this.deptOptions = response.data;
      });
    },

    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        attractId: undefined,
        deptId: undefined,
        companyName: undefined,
        userName: undefined,
        userMobile: undefined,
        projectName: undefined,
        info: undefined,
        evolve: undefined,
        predict: undefined,
        allMoney: undefined,
        prepared: undefined,
        meth: undefined,
        way: undefined,
        dutyName: undefined,
        dutyMobile: undefined,
        address: undefined,
        joinYear: "2025",
        sig: this.queryParams.sig,
        urlList: [],
        pdfList: [],
      };
      this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },

    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      attractInfo(row.attractId).then((response) => {
        this.form = response.data;
        this.form.joinYear = JSON.stringify(response.data.joinYear);

        this.form.sig = this.queryParams.sig;
        if (response.data.urlList === null) {
          this.form.urlList = [];
        } else {
          this.form.urlList = response.data.urlList;
        }
        if (response.data.pdfList === null) {
          this.form.pdfList = [];
        } else {
          this.form.pdfList = response.data.pdfList;
        }

        this.open = true;
        this.title = "修改招商信息";
      });
    },

    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.btnLoading = true;
          editAttract(this.form)
            .then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const attractId = row.attractId;
      this.$modal
        .confirm("是否确认删除选中的数据项？")
        .then(function () {
          return removeAttract(attractId);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },

    // 选择状态
    selectStatus() {
      this.getList();
    },

    // 查看详情
    handleView(row) {
      attractInfo(row.attractId).then((res) => {
        this.detailForm = res.data;
        if (res.data.showUrl) {
          this.detailForm.imgList = JSON.parse(res.data.showUrl);
        } else {
          this.detailForm.imgList = [];
        }
        this.detailOpen = true;
      });
    },

    selectYear() {
      this.getList();
    },

    selectTime() {
      this.getList();
    },

    myNormalizer(node) {
      return {
        id: node.id,
        label: node.label,
        parentId: node.parentId,
        isDisabled: node.children != undefined,
        children: node.children,
      };
    },

    // 上传资料
    uploadMoreImg(data) {
      this.form.pdfList.push(data);
    },

    // 移除
    handleRemoveMore(index) {
      this.form.pdfList.splice(index, 1);
    },

    // 上传图片
    uploadImg(data) {
      this.form.urlList.push(data);
    },

    // 移除图片
    handleRemove(index) {
      this.form.urlList.splice(index, 1);
    },
  },
};
</script>

<style scoped>
.wx_phone_form ul {
  width: 100%;
}
.wx_phone_form .more-100-list li {
  width: calc(50% - 7px);
  height: 130px;
}

.wx_phone_form .more-100-list li:nth-child(2n) {
  margin-right: 0;
}

.wx_phone_form .more-100-list li .demo-image__preview {
  height: 100%;
}
</style>
<style>
.wx_phone_form .el-image__preview {
  border-radius: 4px;
}
</style>
